<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            label-width="100px"
        >
            <el-form-item label="隐患整改人" prop="hazardCorrectors">
                <el-input
                    v-model="queryParams.hazardCorrectors"
                    placeholder="请输入隐患整改人"
                />
            </el-form-item>
            <el-form-item label="隐患级别" prop="hazardLevel">
                <el-select
                    v-model="queryParams.hazardLevel"
                    placeholder="请选择隐患级别"
                    :style="{ width: '100%' }"
                >
                    <el-option
                        v-for="item in hazardLevelOptions"
                        :key="item.dictCode"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="隐患整改状态" prop="hazardStatus">
                <el-select
                    v-model="queryParams.hazardStatus"
                    placeholder="请选择隐患整改状态"
                    :style="{ width: '100%' }"
                >
                    <el-option
                        v-for="item in hazardStatusOptions"
                        :key="item.dictCode"
                        :label="item.dictLabel"
                        :value="item.dictValue"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >搜索</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="danger"
                    icon="el-icon-delete"
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    v-hasPermi="['system:question:remove']"
                    >删除</el-button
                >
            </el-col>
        </el-row>
        <el-table
            v-loading="loading"
            :data="list"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="登记人" align="center" prop="createBy" />
            <el-table-column
                label="登记时间"
                align="center"
                width="180"
                prop="createTime"
            />
            <el-table-column label="整改人" align="center" prop="userName" />
            <el-table-column
                label="隐患状态"
                align="center"
                prop="hazardStatus"
            />
            <el-table-column
                label="隐患描述"
                align="center"
                prop="hazardDesc"
                width="400"
            />
            <!-- <el-table-column label="隐患图片" align="center">
                <template slot-scope="scope">
                    <img
                        class="hide-img"
                        :src="scope.row.hazardPhotoList[0]"
                        alt=""
                        srcset=""
                    />
                </template>
            </el-table-column> -->
            <el-table-column
                label="隐患级别"
                align="center"
                prop="hazardLevel"
                width="100px"
            />
            <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="lookDetail(scope.row)"
                        v-hasPermi="['system:question:edit']"
                        >详情</el-button
                    >
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                        v-hasPermi="['system:question:remove']"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 添加或修改试题管理对话框 -->
        <el-dialog
            title="详情"
            :visible.sync="open"
            width="580px"
            append-to-body
            class="hideDialog"
        >
            <el-form ref="form" :model="form" label-width="90px">
                <el-form-item label="登记人">
                    <el-input v-model="form.createBy" disabled></el-input>
                </el-form-item>
                <el-form-item label="登记时间">
                    <el-input v-model="form.createTime" disabled></el-input>
                </el-form-item>
                <el-form-item label="隐患级别">
                    <el-input v-model="form.hazardLevel" disabled></el-input>
                </el-form-item>
                <el-form-item label="隐患状态">
                    <el-input v-model="form.hazardStatus" disabled></el-input>
                </el-form-item>
                <el-form-item label="隐患描述">
                    <el-input
                        type="textarea"
                        v-model="form.hazardDesc"
                        disabled
                    ></el-input>
                </el-form-item>
                <el-form-item label="隐患图片">
                    <el-image
                        v-for="(url, index) in hazardPhotoList"
                        :key="index"
                        style="width: 100px; height: 100px;margin-right:10px;"
                        :src="url"
                        :preview-src-list="hazardPhotoList"
                        fit="contain"
                    ></el-image>
                </el-form-item>
                <el-form-item label="整改人">
                    <el-input v-model="form.rectifyUser" disabled></el-input>
                </el-form-item>
                <el-form-item label="整改时间">
                    <el-input v-model="form.rectifyDate" disabled></el-input>
                </el-form-item>
                <el-form-item label="整改描述">
                    <el-input
                        type="textarea"
                        v-model="form.rectifyDesc"
                        disabled
                    ></el-input>
                </el-form-item>
                 <el-form-item label="整改图片">
                    <el-image
                        v-for="(url, index) in rectifyPhotoList"
                        :key="index"
                        style="width: 100px; height: 100px;margin-right:10px;"
                        :src="url"
                        :preview-src-list="rectifyPhotoList"
                        fit="contain"
                    ></el-image>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { getList, getHideDetail, delHide } from "@/api/system/hide";
import { getToken } from "@/utils/auth";
export default {
    name: "hideList",
    data () {
        const maxLength = (rule, value, callback) => {
            if (value.length > 200) {
                callback(new Error('试题解析字数不能超过200字'));
            } else {
                callback();
            }
        };
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // 试题管理表格数据
            list: [],
            // 弹出层标题
            // 是否显示弹出层
            open: false,
            // 用户导入参数
            upload: {
                // 是否显示弹出层（用户导入）
                open: false,
                // 弹出层标题（用户导入）
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的用户数据
                updateSupport: 0,
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + "/system/question/importData"
            },
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                hazardCorrectors: '',
                hazardLevel: '',
                hazardStatus: ''
            },
            // 表单参数
            form: {
            },
            hazardStatusOptions: [],
            hazardLevelOptions: [],
            hazardPhotoList:[],
            rectifyPhotoList:[]
        };
    },
    created () {
        this.getList();
        this.getDicts("hazard_status").then(response => {
            this.hazardStatusOptions = response.data;
        });
        this.getDicts("hazard_level").then(response => {
            this.hazardLevelOptions = response.data;
        });
    },
    methods: {
        /** 查询试题管理列表 */
        getList () {
            this.loading = true;
            getList(this.queryParams).then(response => {
                this.list = response.data;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel () {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset () {
            this.form = {

            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery () {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery () {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange (selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        /** 修改按钮操作 */
        lookDetail (row) {
            this.reset();
            const id = row.id || this.ids
            this.open = true
          this.hazardPhotoList=[];
          this.rectifyPhotoList=[];
            getHideDetail(id).then(response => {
                this.form = response.data;
                if (this.form.hazardPhotoList !=null && this.form.hazardPhotoList[0]!=null){
                  this.form.hazardPhotoList.forEach(item => {
                    this.hazardPhotoList.push(item.attaPath);
                  });
                }
              if (this.form.rectifyPhotoList !=null && this.form.rectifyPhotoList[0]!=null){
                this.form.rectifyPhotoList.forEach(item => {
                  this.rectifyPhotoList.push(item.attaPath);
                });
              }
            });
        },
        /** 删除按钮操作 */
        handleDelete (row) {
            const ids = row.id || this.ids;
            this.$confirm('是否确认删除选中的数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return delHide(ids);
            }).then(() => {
                this.getList();
                this.msgSuccess("删除成功");
            }).catch(function () { });
        }
    }
};
</script>
<style scoped>
.hide-img {
    max-width: 50px;
    max-height: 50px;
}
.hideDialog >>> .el-input.is-disabled .el-input__inner,
.hideDialog >>> .el-textarea.is-disabled .el-textarea__inner {
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
}
</style>
